<template>
  <div class="moduleBox">
    <div class="tree">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="总后台" name="MANAGER"> </el-tab-pane>
        <el-tab-pane label="用户管理中心" name="USER_MANAGER"> </el-tab-pane>
        <el-tab-pane label="商家" name="AGENT"></el-tab-pane>
<!--        <el-tab-pane label="仓库方" name="Warehouse"> </el-tab-pane>-->
      </el-tabs>
      <el-row class="left_content">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="margin-bottom: 20px; width: 150px">
        </el-input>
        <el-button type="primary" style="margin-bottom: 10px" @click="handleCreate({}, 'create')">添加</el-button>
        <el-tree
          v-loading="loading"
          element-loading-spinner="el-icon-loading"
          :data="data"
          :props="defaultProps"
          node-key="id.toString()"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <i class="el-icon-circle-plus-outline" @click="() => handleCreate(data, 'createChild')"></i>
              <i class="el-icon-edit" @click="() => handleEdit(data)"></i>
              <i class="el-icon-delete" @click="() => showDeleteTips(node, data)"></i>
            </span>
          </span>
        </el-tree>
      </el-row>
    </div>
    <div class="content">
      <el-row>
        <el-col :span="24">
          <el-card style="margin: 10px">
            <div slot="header">{{ moduleName }}</div>

            <el-col :span="24">
              <div style="width: 95%; margin: 20px auto">
                <el-button type="primary" @click="handleCreatePermission">添加权限</el-button>
              </div>
            </el-col>

            <!--          表格-->
            <el-col :span="24">
              <div style="margin: 0 0 10px 0">
                <el-table
                  :data="tableData.slice((page - 1) * pageSize, page * pageSize)"
                  v-loading="tableLoading"
                  element-loading-spinner="el-icon-loading"
                  style="width: 95%; margin: 0 auto"
                  @selection-change="handleSelectionChange"
                  @current-change="selectOneRow"
                >
                  <el-table-column type="selection" width="55"> </el-table-column>
                  <!--            <el-table-column-->
                  <!--              prop="id"-->
                  <!--              label="id"-->
                  <!--            >-->
                  <!--            </el-table-column>-->

                  <el-table-column prop="path" label="接口"> </el-table-column>
                  <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                      <el-button type="text" @click.stop="deletePermission(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
            <!--          按钮与分页-->
            <div style="width: 95%; margin: 0px auto">
              <div class="pager-group">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-sizes="[15]"
                  :page-size="pageSize"
                  layout="total, sizes, jumper, prev, next"
                  :total="tableData.length"
                >
                </el-pagination>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <div style="width: 100%; height: 50px; background: #ffe6e6; border: 1px solid #c82929; margin: 10px auto">
          <div style="line-height: 50px; margin-left: 20px">
            <i class="el-icon-warning" style="color: #e47475; font-size: 18px"></i>
            <span style="color: #c82929; display: inline-block; margin-left: 10px; font-size: 18px"
              >确认删除所选记录吗？</span
            >
          </div>
        </div>
        <div slot="footer" style="text-align: center">
          <el-button type="primary" @click="remove">确认</el-button>
          <el-button type="info" @click="dialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 弹窗部分 -->
    <el-row>
      <el-col :span="24">
        <!-- 左侧新建或编辑弹窗 -->
        <createOrUpdate @onRefreshData="FindByTypeAndClient()" ref="createOrUpdate" />
        <!-- 添加权限 -->
        <i-permission
          :dialog-visible="createPermissionProps.visible"
          :edit-id="editId"
          @on-dialog-close="handleClose"
          @on-createPermission-success="handleCreatePermissionSuccess"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
let id = 1000
import { findByAccountTypeAndClient, del, removePermission, search, count } from '@/project/service/module'
import { findByModuleId } from '@/project/service/resource'
import createOrUpdate from './createOrUpdate'
import IPermission from './createPermission'

export default {
  data() {
    return {
      model: 'module',
      dialogVisible: false,
      moduleName: '添加模块信息',
      tableLoading: false,
      activeName: 'MANAGER',
      client: '',
      moduleId: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      createProps: {
        visible: false
      },
      editProps: {
        visible: false
      },
      createPermissionProps: {
        visible: false
      },
      isCreate: false,
      isPermission: false,
      isEdit: false,
      selectList: [],
      sort: { asc: [], desc: [] },
      pageSize: 15,
      page: 1,
      total: 0,
      extraParam: {},
      tableData: [],
      filterText: '',
      editId: null,
      data: [],
      appData: [],
      loading: false,
      deleteData: null,
      loading1: true
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    activeName(val) {
      this.moduleName = '添加模块信息'
      this.tableData = []
    }
  },
  components: {
    IPermission,
    createOrUpdate
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      // this.search(this.page)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      // this.search(this.page)
    },
    selectOneRow(row) {
      console.log(row)
      this.selectList = row
    },
    deletePermission(id) {
      let param = {
        module: {
          id: this.moduleId.toString()
        },
        resource: {
          id: id.toString()
        }
      }
      removePermission(param, res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        findByModuleId({ moduleId:this.moduleId }, res => {
          this.tableData = res
        })
      })
    },
    // 左侧选项卡点击
    handleClick(tab) {
      console.log('tab', tab)
      this.FindByTypeAndClient()
    },
    handleCreatePermissionSuccess() {
      this.createPermissionProps.visible = false
      findByModuleId({ module: { id: this.moduleId } }, res => {
        this.tableData = res
      })
    },
    handleCreatePermission() {
      console.log(this.editId)
      this.isPermission = true
      this.createPermissionProps.visible = true
    },
    handleEdit(data) {
      this.$refs.createOrUpdate.initData(data, 'edit', this.client)
    },
    handleCreate(data, item) {
      this.$refs.createOrUpdate.initData(data, item, this.client)
    },
    // 左侧树节点点击
    handleNodeClick(data) {
      this.tableLoading = true
      console.log('2222', data)
      this.editId = data.id.toString()
      this.moduleId = data.id.toString()
      this.moduleName = data.name
      findByModuleId({ moduleId: this.moduleId }, res => {
        this.tableData = res
        this.tableLoading = false
      })
    },
    handleClose() {
      this.createPermissionProps.visible = false
      this.isPermission = false
    },
    search(page) {
      let _t = this
      _t.page = page
      let param = {
        pageable: {
          page: page,
          size: _t.pageSize,
          sort: 'id',
          desc: true
        },
        [this.model]: _t.extraParam
      }
      search(param, res => {
        let data = res
        _t.data = data
        _t.getTotal()
      })
    },
    getTotal() {
      let _t = this
      let param = { [this.model]: _t.extraParam }
      count(param, res => {
        _t.total = parseInt(res)
      })
    },
    handleTransportSelectList(list) {
      this.selectList = list
    },
    //批量删除
    batchDelete() {
      this.broadcast('SiTable', 'on-get-selectList')
      this.$nextTick(() => {
        let selectList = this.selectList
        if (selectList.length === 0) {
          this.$notify.warning({
            title: '至少选择一条数据'
          })
          return
        }
        this.$confirm('确定删除所选记录吗?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let ids = []
            this.selectList.forEach(v => {
              ids.push(v.id)
            })
            del({ ids: ids }, res => {
              _t.search(_t.page)
              // this.$message({
              //   type: 'success',
              //   message: '删除成功!'
              // });
            })
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // });
          })
      })
    },
    handleSelectionChange(val) {
      this.selectList = val
    },
    filterNode(value, data) {
      console.log(value, data)
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    append(data) {
      const newChild = { id: id++, label: 'testtest', children: [] }
      if (!data.children) {
        this.$set(data, 'children', [])
      }
      data.children.push(newChild)
    },
    showDeleteTips(node, data) {
      this.dialogVisible = true
      this.deleteData = data
      // this.remove(node, data)
    },
    remove() {
      let that = this
      // that.$confirm(`确定删除选中内容？`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      let params = {
        id: this.deleteData.id
      }
      del(params, res => {
        // that.$message.success('删除成功');
        this.FindByTypeAndClient()
        that.moduleName = '请选择模块'
        that.dialogVisible = false
      })
      // }).catch(() => {
      //   that.$message({
      //     type: 'info',
      //     message: `已取消删除`
      //   });
      // });
    },
    FindByTypeAndClient() {
      this.loading = true
      if(this.activeName ==='MANAGER') {
        this.client = 'MANAGER_WEB'
      } else if(this.activeName === 'USER_MANAGER') {
        this.client = 'USER_MANAGER_WEB'
      } else if(this.activeName === 'AGENT') {
        this.client = 'AGENT_WEB'
      }
      findByAccountTypeAndClient({ accountType: this.activeName, client: this.client }, res => {
        this.data = res
        this.loading = false
      })
    }
  },
  mounted() {
    this.FindByTypeAndClient()
    // this.search(1)
  }
}
</script>

<style>
.moduleBox {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.tree {
  margin-top: 10px;
  margin-left: 10px;
  width: 270px;
  height: 100%;
  overflow: auto;
  /*border-bottom: 1px solid #eee;*/
}

.tree::-webkit-scrollbar {
  display: none;
}
.el-tabs--border-card {
  border-bottom: none;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.left_content {
  padding: 15px;
  -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
  background: #fff;
  border: 1px solid #dcdfe6;
  border-top: none;
}
/*.content {*/
/*  width: 85%;*/
/*  height: 95%;*/
/*  margin-right: 20px;*/
/*  !*padding: 20px;*!*/
/*}*/
</style>
